<template>
    <div class="container">
        <div class="notice"></div>
        <div id="top-search-fixed" class="row">
            <a href="" class="category">
                <i class="iconfont category-change-color" style="opacity: 0;"></i><i class="iconfont"></i>
            </a>
            <a href="" class="placeholder">
                <i class="iconfont"></i>输入关键字搜索<span class="placeholder-change-bg" style="opacity: 0;"></span>
            </a>
            <a href="#/cart" class="cart">
                <i class="iconfont category-change-color" style="opacity: 0;"></i><i class="iconfont"></i>
            </a>
            <div class="change-bg" style="opacity: 0;"></div>
        </div>
        <div id="content">
            <div class="row widget owl-carousel-widget">
                <div class="col-xs-12">
                    <div id="swiper-slideshow0"
                         class="swiper-container swiper-container-horizontal swiper-container-ios">

                        <div class="swiper-wrapper">
                            <div v-for="item in banner.image_list" class="swiper-slide" >
                                <img style="width:100%" v-bind:src="item.image" alt="">
                            </div>

                            <!--
                            <div class="swiper-slide">
                                <img style="width:100%" src="/image/test/2-mb-750x370.jpg" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img style="width:100%" src="/image/test/1-mb-750x370.png" alt="">
                            </div>
                            -->
                        </div>

                        <div class="swiper-pagination swiper-pagination-bullets">
                        </div>
                    </div>

                </div>
            </div>

            <div class="row widget quick-icon-link-widget">
                <div class="col-xs-12">
                    <a v-for="item in home_category.image_list"
                       v-bind:href="item.link" >
                        <img
                             v-bind:src="item.image"
                             class="lazy img-responsive" style="opacity: 1;">
                        <span>{{item.title}}</span>
                    </a>
                </div>
            </div>


            <div class="row product-list-item-style product-min-box">
                <div class="module-title"><span>推荐商品</span></div>
                <div class="product-grid-box col-xs-12">
                    <div v-for="item in recommend.goods_list" class="col-xs-6 product-item">
                        <div class="product-item-wrapper">
                            <div class="image">
                                <a href="">
                                    <img v-bind:src="item.image" class="lazy img-responsive">
                                </a>
                                <!--<span class="sales">销量： 100,039</span>-->

                            </div>
                            <div class="info">
                                <a href="">{{item.name}}</a>
                                <div class="price">
                                    <span class="price-new">￥{{item.price}}</span>
                                    <!--<span class="price-old">￥{{item.price}}</span>-->
                                </div>

                                <div  v-on:click="cart_add(item)" class="add-cart" ><i class="iconfont"></i></div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>


            <div style="height:43px;"></div>
        </div>

        <bottom-nav></bottom-nav>
    </div>
</template>
<script>
    import nav from '../components/common/nav';
    export default {

        data:function(){
            return {

                banner:[],
                home_category:[],
                recommend:{
                    title:'',
                    goods_list:[]
                },

            }
        },

        methods:{

            get_banner:function(){

                var t = this;
                var url = this.config.web_url + '?r=banner/index';
                url += '&name=home';
                this.axios.get( url ).then(function (res) {

                    t.banner = res.data;

                });


            },

            get_home_category:function(){

                var t = this;
                var url = this.config.web_url + '?r=banner/index';
                url += '&name=home_category';
                this.axios.get( url ).then(function (res) {

                    t.home_category = res.data;

                });

            },

            get_recommend:function(){

                var t = this;
                var url = this.config.web_url + '?r=recommend/index';
                this.axios.get( url ).then(function (res) {

                    t.recommend = res.data;


                });
            },

            cart_add:function( product ){

                //todo 添加到购物车
                var t = this;
                var url = this.config.web_url + '?r=cart/add';
                url += '&product_id='+product.id+'&number=1';
                this.axios.get( url )
                    .then(function (res) {

                        if( res.data.description ){
                            //todo 显示 购物车添加提示
                            // t.tips.message = res.data.description;
                            // t.tips.show = 1;

                            var tips_data = {
                                show:1,
                                message:res.data.description
                            };

                            t.bus.$emit('tips',tips_data);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            }


        },

        created:function(){

            this.get_banner();
            this.get_home_category();
            this.get_recommend();
            setTimeout(function(){
                var slideshow_swiper = new Swiper ('#swiper-slideshow0', {
                    loop: true,
                    autoplay: {
                        delay: 3000,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                    }
                });
            },1000);

        },

        components:{
            'bottom-nav':nav
        }

    }

</script>
